<!--
 * @Description: 
 * @Version: 1.0
 * @Author: yzq
 * @Date: 2025-04-29 15:35:21
 * @FilePath: \web\src\views\system\dataDictionary\components\SaveDictionary.vue
 * @LastEditors: yzq
 * @LastEditTime: 2025-05-29 16:08:50
-->
<template>
  <el-dialog :title="`${currentDict?.dictId ? '编辑' : '新增'}字典`" :model-value="show" width="500px" @close="commEvent.onClose">
    <el-form ref="formRef" :model="formValue" :rules="rules">
      <el-form-item label="字典名称" prop="dictName">
        <el-input v-model="formValue.dictName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="字典类型" prop="dictType">
        <el-input v-model="formValue.dictType" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch v-model="formValue.status" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formValue.remark" type="textarea" :rows="4" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="commEvent.onEnter">确 定</el-button>
      <el-button @click="commEvent.onClose">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { PropType, ref, watch, nextTick } from "vue"
import { ElMessage, FormInstance, FormRules } from "element-plus"
import { saveDataDictionary } from "@/api/modules/system"
import { SystemSpace } from "@/api/interface/system"
const props = defineProps({
  show: { type: Boolean, default: false },
  currentDict: { type: Object as PropType<SystemSpace.DataDictionaryPage>, default: () => {} }
})
const emit = defineEmits(["update:show", "refresh"])
// 参数
const formRef = ref<FormInstance>() // 表单实例
const formValue = ref({
  dictName: "",
  dictType: "",
  status: 1,
  remark: ""
}) // 表单数据
// 表单校验规则
const rules: FormRules = {
  dictName: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
  dictType: [{ required: true, message: "请输入字典类型", trigger: "blur" }],
  remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
}
// 事件集合
const commEvent = {
  onClose: () => {
    emit("update:show", false)
  },
  // 提交表单
  onEnter: () => {
    if (!formRef.value) return
    formRef.value.validate(async valid => {
      if (!valid) return
      const params: SystemSpace.SaveDataDictionary = { ...formValue.value }
      if (props.currentDict?.dictId) {
        params.dictId = props.currentDict.dictId
      }
      const res = await saveDataDictionary(params)
      if (res.code === "200") {
        ElMessage.success("操作成功")
        commEvent.onClose()
        emit("refresh")
      }
    })
  }
}
watch(
  () => props.show,
  flag => {
    if (flag) {
      nextTick(() => {
        formRef.value?.resetFields()
        if (props.currentDict) {
          formValue.value = { ...props.currentDict, status: Number(props.currentDict.status) }
        }
      })
    }
  }
)
</script>

<style lang="scss" scoped></style>
